import React, { memo, useEffect, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { routerData, RouterDataFace } from './config'
import { DisCoverHeaderNavWrapper } from './style'
interface IProps {
  children?: ReactNode
}
const HeaderNav: FC<IProps> = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const [currentPath, setCurrentPath] = useState(location.pathname)
  useEffect(() => {
    setCurrentPath(location.pathname)
  })
  const selectTab = (item: RouterDataFace) => {
    navigate('/discoverMusic/' + item.path)
  }
  return (
    <DisCoverHeaderNavWrapper>
      <ul>
        {routerData.map((item) => {
          return (
            <li
              key={item.name}
              className={
                item.path === currentPath.split('/')[2] ? 'active' : ''
              }
              onClick={() => selectTab(item)}
            >
              {item.name}
            </li>
          )
        })}
      </ul>
    </DisCoverHeaderNavWrapper>
  )
}

export default memo(HeaderNav)
